<template>
  <div class="member-list pad">

    <div class="pic_header" v-if="type == 1">
      <p style="font-weight:bold">{{ this.enterpriseName }}</p>
      <p>当前共{{ this.memberTotal }}名学生</p>
    </div>
    <div class="pic_header" v-if="type == 2">
      <p style="font-weight:bold">{{ this.enterpriseName }}</p>
      <p>当前共{{ this.memberTotal }}名成员</p>
    </div>

    <!-- 插入图表 -->
    <!-- 这是学校的图表 -->
    <div class="school_pic" v-if="type == 1">


      <!-- 图表1 -->
      <el-card class="pic1">
        <!-- @click="lookHealthy" -->
        <big>健康测评</big>
        <el-divider></el-divider>
        <!-- 圆饼图 -->
        <div id="pic1_img"></div>
      </el-card>

      <!-- 图表2 -->
      <el-card class="pic2">
        <!-- 三行文字 -->
        <big @click="lookTemperature(enterpriseName)">体温打卡</big>
        <el-divider></el-divider>
        <div class="pic2_text">
          <div class="text1">
            <p>体温录入人数</p>
            <p><i class="el-icon-user-solid"></i>{{ temperatureNumber }}</p>
          </div>
          <el-divider style="height: 3em" direction="vertical"></el-divider>
          <div class="text1">
            <p>正常人数:</p>
            <p><i class="el-icon-user-solid"></i>{{ normothermiaNumber }}</p>
          </div>

          <el-divider style="height: 60px" direction="vertical"></el-divider>

          <div class="text1">
            <p>异常人数:</p>
            <p>
              <i class="el-icon-user-solid"></i> {{ temperatureAbnormalNumber }}
            </p>
          </div>
        </div>
        <!-- 三个图 -->
        <div class="pic2_three">
          <el-progress
            type="circle"
            :percentage="temperatureNumber"
          ></el-progress>
          <el-progress
            type="circle"
            :percentage="normothermiaNumber"
          ></el-progress>
          <el-progress
            type="circle"
            :percentage="temperatureAbnormalNumber"
          ></el-progress>
        </div>
      </el-card>

      <!-- 图表3 -->
      <el-card class="pic3">
        <!-- 三行文字  @click="lookHeart"-->
        <big @click="lookHeart(enterpriseName)">心理测评</big>
        <el-divider></el-divider>
        <div class="pic3_text">
          <div class="text1">
            <p>心理测评次数:</p>
            <p><i class="el-icon-user-solid"></i>{{ personNumber }}</p>
          </div>

          <el-divider direction="vertical"></el-divider>

          <div class="text1">
            <p>心理测评人数</p>
            <p><i class="el-icon-user-solid"></i>{{ testNumber }}</p>
          </div>

          <el-divider direction="vertical"></el-divider>
          <div class="text1">
            <p>异常人数</p>
            <p><i class="el-icon-user-solid"></i>{{ abnormalNumber }}</p>
          </div>
        </div>

        <!-- 两进度条 -->
        <p>
          <i class="el-icon-warning" style="color: lightgreen"></i>心里测评次数
        </p>
        <el-progress
          :percentage="testFinalNum"
          color="lightgreen"
        ></el-progress>
        <!-- 异常人数/(心理测评人数+异常人数) -->
        <p style="margin-top: 21px">
          <span
          ><i class="el-icon-warning" style="color: red"></i> 异常人数
          </span>
          <span
          ><i class="el-icon-warning" style="color: rgb(235, 238, 245)"></i
          >心理测评人数</span
          >
        </p>
        <el-progress :percentage="heartFinalNum" color="red"></el-progress>
      </el-card>


    </div>


    <!-- -----------------------------------这是公司图表--------------------------- -->
    <div class="firm_pic" v-if="type == 2">
      <!-- 顶部四方块 -->
      <div class="topFour">
        <div class="color1">
          <div class="cor_left">
            <p class="cor_p1">总浏览量</p>
            <p class="cor_p2">{{ firmTotalBrowse }}</p>
            <p class="cor_p3">
              周同比 <i class="el-icon-caret-top"></i> {{ weekly1() }}%
            </p>
          </div>
          <div class="cor_right">
            <p class="cor_p1">今日浏览量</p>
            <p class="cor_p2">{{ firmTodayBrowse }}</p>
            <p class="cor_p3">
              日环比 <i class="el-icon-caret-top"></i> {{ dayly1() }}%
            </p>
          </div>
        </div>
        <div class="color2">
          <div class="cor_left">
            <p class="cor_p1">分享总量</p>
            <p class="cor_p2">{{ firmTotalShare }}</p>
            <p class="cor_p3">
              周同比 <i class="el-icon-caret-top"></i> {{ weekly2() }}%
            </p>
          </div>
          <div class="cor_right">
            <p class="cor_p1">今日分享量</p>
            <p class="cor_p2">{{ firmTodayShare }}</p>
            <p class="cor_p3">
              日环比 <i class="el-icon-caret-top"></i> {{ dayly2() }}%
            </p>
          </div>
        </div>
        <div class="color3">
          <div class="cor_left">
            <p class="cor_p1">点赞总量</p>
            <p class="cor_p2">{{ firmTotalCollection }}</p>
            <p class="cor_p3">
              周同比 <i class="el-icon-caret-top"></i> {{ weekly3() }}%
            </p>
          </div>
          <div class="cor_right">
            <p class="cor_p1">今日点赞量</p>
            <p class="cor_p2">{{ firmTodayCollection }}</p>
            <p class="cor_p3">
              日环比 <i class="el-icon-caret-top"></i> {{ dayly3() }}%
            </p>
          </div>
        </div>
        <div class="color4">
          <div class="cor_left">
            <p class="cor_p1">用户总量</p>
            <p class="cor_p2">{{ firmUserNumber }}</p>
            <p class="cor_p3">
              周同比 <i class="el-icon-caret-top"></i> {{ weekly4() }}%
            </p>
          </div>
          <div class="cor_right">
            <p class="cor_p1">今日新增量</p>
            <p class="cor_p2">{{ firmTodayUserNumber }}</p>
            <p class="cor_p3">
              日环比 <i class="el-icon-caret-top"></i> {{ dayly4() }}%
            </p>
          </div>
        </div>
      </div>
      <div class="heart_twitter">
        <!-- 心理测评 -->
        <el-card class="color_text">
          <div class="color_text1">
            <p>心理测评</p>
            <el-divider></el-divider>
            <div class="text1">
              <p>心理测评次数:</p>
              <p><i class="el-icon-user-solid"></i>{{ personNumber }}</p>
            </div>

            <el-divider direction="vertical"></el-divider>

            <div class="text1">
              <p>心理测评人数</p>
              <p><i class="el-icon-user-solid"></i>{{ testNumber }}</p>
            </div>

            <el-divider direction="vertical"></el-divider>
            <div class="text1">
              <p>异常人数</p>
              <p><i class="el-icon-user-solid"></i>{{ abnormalNumber }}</p>
            </div>
          </div>
          <p>
            <i class="el-icon-warning" style="color: lightgreen"></i
            >心里测评次数
          </p>
          <el-progress :percentage="testNumber" color="green"></el-progress>
          <p style="margin-top: 21px">
            <span
            ><i class="el-icon-warning" style="color: red"></i> 异常人数
            </span>
            <span
            ><i class="el-icon-warning" style="color: rgb(235, 238, 245)"></i
            >心理测评人数</span
            >
          </p>
          <el-progress :percentage="normalNumber" color="red"></el-progress>
        </el-card>
        <!-- 推文统计 -->
        <el-card class="twitter">
          <p>推文统计</p>
          <el-divider></el-divider>
          <div style="display: flex">
            <div class="tw_content" @click="goArticleList">
              <img src="../assets/images/article_num.png"/>
              <div>
                <p>{{ articleNumber || "--" }}</p>
                <span>文章数</span>
              </div>
            </div>
            <div class="tw_content" @click="goVideoList">
              <img src="../assets/images/video_num.png"/>
              <div>
                <p>{{ videoNumber || "--" }}</p>
                <span>视频数</span>
              </div>
            </div>
            <div class="tw_content" @click="goAuditedArticleList">
              <img src="../assets/images/pass_num.png"/>
              <div>
                <p>{{ auditedNumber || "--" }}</p>
                <span>已审核</span>
              </div>
            </div>
          </div>
          <div style="display: flex">
            <div class="tw_content" @click="goPendingArticleList">
              <img src="../assets/images/wait_num.png"/>
              <div>
                <p>{{ tobeAuditedNumber || "--" }}</p>
                <span>待审核</span>
              </div>
            </div>
            <div class="tw_content" @click="goFailureArticleList">
              <img src="../assets/images/false_num.png"/>
              <div>
                <p>{{ failNumber || "--" }}</p>
                <span>审核失败</span>
              </div>
            </div>
            <div class="tw_content" @click="goDisabledArticleList">
              <img src="../assets/images/pass_num.png"/>
              <div>
                <p>{{ forbiddenNumber || "--" }}</p>
                <span>系统禁用</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 排行榜 -->
      <div class="analysis-body">
        <el-card class="body-item">
          <div class="item-title">点赞量 Top10</div>
          <div class="top-box">
            <div
              class="top-item"
              v-for="(item, index) in likeTop10"
              :key="index"
              @click="goKnowledgeDetail(item)"
            >
              <div>
                <span :class="index < 3 ? 'active' : ''">{{ index + 1 }}</span>
                <span>{{ item.knowledgeName }}</span>
              </div>
              <div>
                <span>{{ item.createDate }}</span>
                <span>{{ item.thumbUpTotal }}</span>
              </div>
            </div>
          </div>
        </el-card>

        <el-card class="body-item">
          <div class="item-title">分享量 Top10</div>
          <div class="top-box">
            <div
              class="top-item"
              v-for="(item, index) in shareTop10"
              :key="index"
              @click="goKnowledgeDetail(item)"
            >
              <div>
                <span :class="index < 3 ? 'active' : ''">{{ index + 1 }}</span>
                <span>{{ item.knowledgeName }}</span>
              </div>
              <div>
                <span>{{ item.createDate }}</span>
                <span>{{ item.totalShare }}</span>
              </div>
            </div>
          </div>
        </el-card>

        <el-card class="body-item">
          <div class="item-title">浏览量 Top10</div>
          <div class="top-box">
            <div
              class="top-item"
              v-for="(item, index) in browserTop10"
              :key="index"
              @click="goKnowledgeDetail(item)"
            >
              <div>
                <span :class="index < 3 ? 'active' : ''">{{ index + 1 }}</span>
                <span>{{ item.knowledgeName }}</span>
              </div>
              <div>
                <span>{{ item.createDate }}</span>
                <span>{{ item.browseNumber }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>


    <!-- ------------------------------------------------------------------------- -->
    <div class="men_List">
      <div class="head" v-if="type == 1">
        <h1>成员列表</h1>
      </div>
      <div class="head" v-if="type == 2">
        <h1>成员列表</h1>
      </div>
      <div class="person_search">
        微信昵称
        <el-input
          placeholder="家长微信昵称"
          v-model="wechatName"
          style="width: 192px;height: 30px; background: #FBFBFB;margin-right:10px"
          @input="clearMemberSearch(1)"
          @keypress.enter.native="handleMemberSearch"/>
        成员昵称
        <el-input
          placeholder="成员昵称"
          v-model="memberName"
          style="width: 192px ;height:30px;background: #FBFBFB"
          @input="clearMemberSearch(2)"
          @keypress.enter.native="handleMemberSearch"/>
        <el-button style="margin: 0 10px 0 10px" type="primary" @click="handleMemberSearch">查询</el-button>
      </div>
      <el-table
        stripe
        border
        class="m-t-b"
        :data="memberList"
        v-loading="memberLoading"
      >
        <el-table-column label="成员昵称" prop="name"></el-table-column>
        <el-table-column label="家长微信昵称" prop="nickname"></el-table-column>
        <el-table-column label="年龄" prop="barthday"></el-table-column>
        <el-table-column label="性别">
          <template slot-scope="scope">
            {{ scope.row.sex == 1 ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column label="年级信息">
          <template slot-scope="scope">
            {{ scope.row.grade }} * {{ scope.row.grades }} * {{ scope.row.sno }}
          </template>
        </el-table-column>
        <el-table-column label="创建日期" prop="createDate"></el-table-column>
        <el-table-column label="操作" width="150" v-if="showTravel">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="goMemberInfo(scope.row)"
            >查看体温/行程
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="flex m-t-b"
        :page-size="pageSize"
        background
        layout="prev, pager, next"
        @current-change="handleMemberPagi"
        :current-page.sync="currentPage"
        :total="memberTotal"
      >
      </el-pagination>
    </div>
  </div>
</template>


<script>
import {
  getEnterpriseMember,
  getTemperaturePeople,
  getPsychologPeople,
  getFirmInformations,
  getFindAnalysisData2,
  getLikeTop10,
  getShareTop10,
  getBrowserTop10,
  getSchoolFatPeople,
  getFirmPerInformations,
  getFirmPerDayInfors,
} from "../api/version2";

var echarts = require("echarts");
import {formatDate, mapStr2Json} from "../util";

export default {
  name: "MemberList",
  data() {
    return {
      showTravel: false,
      memberLoading: false,
      pageSize: 10,
      memberName: "",
      wechatName: "",
      enterpriseId: "",
      enterpriseName: "",
      memberList: [],
      memberTotal: 0,
      currentPage: 1,

      // 学校肥胖数据
      normalkg: 0,
      growWait: 0,
      litteThin: 0,
      moreFat: 0,
      fatter: 0,

      // 第二章图表数据
      temperatureNumber: 0,
      normothermiaNumber: 0,
      temperatureAbnormalNumber: 0,
      // 第三张图表数据
      personNumber: 0,
      testNumber: 0,
      normalNumber: 0,
      abnormalNumber: 0,

      type: 0,
      // 公司顶部数据
      // 总浏览量，今日浏览量
      firmTotalBrowse: 0,
      firmTodayBrowse: 0,
      firmTotal777Browse: 0,
      firmToday777Browse: 0,

      // 总分享，今日分享
      firmTotalShare: 0,
      firmTodayShare: 0,
      firmTotal777Share: 0,
      firmToday777Share: 0,

      // 点赞  收藏 一样的
      firmTotalCollection: 0,
      firmTodayCollection: 0,
      firmTotal777Collection: 0,
      firmToday777Collection: 0,
      // 用户总量 新增
      firmUserNumber: 0,
      firmTodayUserNumber: 0,
      firmUser777Number: 0,
      firmTodayUser777Number: 0,

      // 公司视频数据
      articleNumber: 0,
      videoNumber: 0,
      tobeAuditedNumber: 0,
      auditedNumber: 0,
      failNumber: 0,
      forbiddenNumber: 0,

      likeTop10: [],
      shareTop10: [],
      browserTop10: [],
    };
  },
  methods: {
    //---------------------------- 后加的---------------------------------------
    goBack() {
      history.back();
      console.log(this.type);
    },

    // 查看心里统计
    lookHeart(enterpriseName) {
      // alert(123)
      // if (!this.$checkAuth("lookTemperature")) {
      //   return this.$message.error("暂无对应操作权限!");
      // }
      this.$router.push(
        `/statistics/mental/${enterpriseName}`
      );

    },
    //查看体温
    lookTemperature(enterpriseName) {
      this.$router.push(
        `/statistics/temperature/${enterpriseName}`
      );
    },
    // 学校肥胖数据
    fetchFatPeople(enterpriseName) {
      getSchoolFatPeople(enterpriseName).then((res) => {
        // console.log(res);
        let list = mapStr2Json(res.data.data.resultProportion);
        console.log(list);
        // console.log(list.length);
        // console.log(list[0].label);
        for (var z = 0; z < list.length; z++) {
          console.log(list.leng);
          if (list[z].label == "正常") {
            this.normalkg = list[z].rate;
          } else if (list[z].label == "消瘦") {
            this.litteThin = list[z].rate;
          } else if (list[z].label == "生长迟缓") {
            this.growWait = list[z].rate;
          } else if (list[z].label == "肥胖") {
            this.moreFat = list[z].rate;
          } else if (list[z].label == "超重") {
            this.fatter = list[z].rate;
            console.log(list[z].rate);
          }
        }
        // this.normalkg = list[3] ? list[3].rate : 0;
        // this.litteThin = list[0].rate;
        // this.moreFat = list[1].rate;
        // this.fatter = list[2].rate;
      });
    },

    // 第二章图表查询人数
    fetchTemperaturePeople(enterpriseName) {
      getTemperaturePeople(enterpriseName).then((res) => {
        // console.log("1111111111111111111111")
        // console.log(res);
        let list = res.data.data || [];
        this.temperatureNumber = list.temperatureNumber
          ? parseInt(list.temperatureNumber)
          : 0; //体温人数百分比
        this.normothermiaNumber = list.normothermiaNumber
          ? parseInt(list.normothermiaNumber)
          : 0; //正常人数
        this.temperatureAbnormalNumber = list.temperatureAbnormalNumber
          ? parseInt(list.temperatureAbnormalNumber)
          : 0; //异常人数百分比
      });
      // .catch(err => {
      //   console.log(err)
      // })
    },
    // 第三章图表查询人数
    testNumberPeople(enterpriseName) {
      getPsychologPeople(enterpriseName).then((res) => {
        console.log("第三章图表查询人数")
        console.log(res);
        let list = res.data.data || [];
        this.personNumber =
          list.personNumber == 0 ? 0 : parseInt(list.personNumber || 0);
        this.testNumber = list.number == 0 ? 0 : parseInt(list.number || 0);
        this.normalNumber =
          list.normalNumber == 0 ? 0 : parseInt(list.normalNumber || 0);
        this.abnormalNumber =
          list.abnormalNumber == 0 ? 0 : parseInt(list.abnormalNumber || 0);
      });
    },
    // 公司查询
    fetchFirmInfor(enterpriseId) {
      //
      getFirmInformations(enterpriseId).then((res) => {
        // console.log(res);
        let list = res.data.data || [];
        this.firmTotalBrowse =
          list.totalBrowse == 0 ? 0 : parseInt(list.totalBrowse || 0);
        this.firmTodayBrowse =
          list.todayBrowse == 0 ? 0 : parseInt(list.todayBrowse || 0);

        this.firmTotalShare =
          list.totalShare == 0 ? 0 : parseInt(list.totalShare || 0);
        this.firmTodayShare =
          list.todayShare == 0 ? 0 : parseInt(list.todayShare || 0);

        this.firmTotalCollection =
          list.totalCollection == 0 ? 0 : parseInt(list.totalCollection || 0);
        this.firmTodayCollection =
          list.todayCollection == 0 ? 0 : parseInt(list.todayCollection || 0);

        this.firmUserNumber =
          list.userNumber == 0 ? 0 : parseInt(list.userNumber || 0);
        this.firmTodayUserNumber =
          list.todayUserNumber == 0 ? 0 : parseInt(list.todayUserNumber || 0);
      });
      // 获取过去的 周同比数据
      getFirmPerInformations(enterpriseId).then((res) => {
        let list = res.data.data || [];
        console.log(list);
        this.firmTotal777Browse =
          list.totalBrowse == 0 ? 0 : parseInt(list.totalBrowse || 0);

        this.firmTotal777Share =
          list.totalShare == 0 ? 0 : parseInt(list.totalShare || 0);

        this.firmTotal777Collection =
          list.totalCollection == 0 ? 0 : parseInt(list.totalCollection || 0);

        this.firmUser777Number =
          list.userNumber == 0 ? 0 : parseInt(list.userNumber || 0);
      });
      // 获取过去的日环比数据
      getFirmPerDayInfors(enterpriseId).then((res) => {
        let list = res.data.data || [];
        console.log(list);
        this.firmToday777Browse =
          list.totalBrowse == 0 ? 0 : parseInt(list.totalBrowse || 0);

        this.firmToday777Share =
          list.totalShare == 0 ? 0 : parseInt(list.totalShare || 0);

        this.firmToday777Collection =
          list.totalCollection == 0 ? 0 : parseInt(list.totalCollection || 0);

        this.firmTodayUser777Number =
          list.userNumber == 0 ? 0 : parseInt(list.userNumber || 0);
      });
    },
    // 公司的数据查询/审核之类的
    fetchFirmInforNum(enterpriseId) {
      getFindAnalysisData2(enterpriseId).then((res) => {
        console.log(res);
        let list = res.data.data || [];
        this.articleNumber = list.articleNumber;
        this.videoNumber = list.videoNumber;
        this.tobeAuditedNumber = list.tobeAuditedNumber;
        this.auditedNumber = list.auditedNumber;
        this.failNumber = list.failNumber;
        this.forbiddenNumber = list.forbiddenNumber;
      });
    },
    fetchLikeTop10() {
      // 获取点赞top10
      getLikeTop10(this.enterpriseId)
        .then((res) => {
          let list = res.data.data || [];
          list.forEach((item) => {
            item.createDate = formatDate(item.createDate, "zh:");
          });
          this.likeTop10 = list;
        })
        .catch((e) => {
        });
    },
    fetchShareTop10() {
      // 获取分享top10
      getShareTop10(this.enterpriseId)
        .then((res) => {
          let list = res.data.data || [];
          list.forEach((item) => {
            item.createDate = formatDate(item.createDate, "zh:");
          });
          this.shareTop10 = list;
        })
        .catch((e) => {
        });
    },
    fetchBrowserTop10() {
      // 获取浏览top10
      getBrowserTop10(this.enterpriseId)
        .then((res) => {
          let list = res.data.data || [];
          list.forEach((item) => {
            item.createDate = formatDate(item.createDate, "zh:");
          });
          this.browserTop10 = list;
        })
        .catch((e) => {
        });
    },

    // -------------------------------------END---------------------------------------------
    fetchMemberList(index) {
      // 查询机构成员
      this.memberLoading = true;
      getEnterpriseMember({
        index,
        count: this.pageSize,
        queryParam: {
          // enterpriseId: this.enterpriseId,
          enterpriseName:this.enterpriseName,
          name: this.memberName || null,
          nickname: this.wechatName || null,
        },
      })
        .then((res) => {
          console.log("=======getEnterpriseMember")
          console.log(res)
          this.memberLoading = false;
          let list = res.data.data.list || [];
          list.forEach((item) => {
            item.createDate = formatDate(item.createDate, "zh:");
          });
          if (list.length) {
            this.showTravel = Boolean(list[0].showTravel);
          }
          this.memberList = list;
          this.memberTotal = res.data.data.totalRecord;
        })
        .catch((e) => {
          this.memberLoading = false;
        });
    },
    clearMemberSearch(type) {
      // 清除成员搜索
      if (type == 1 && !this.wechatName.trim()) {
        this.fetchMemberList(1);
      } else if (type == 2 && !this.memberName.trim()) {
        this.fetchMemberList(1);
      }
    },
    handleMemberSearch() {
      // 成员搜索
      this.currentPage = 1;
      this.fetchMemberList(1);
    },
    handleMemberPagi(page) {
      // 成员列表分页
      this.currentPage = page;
      this.fetchMemberList(page);
    },
    goMemberInfo(row) {
      // 查看成员体温/行程
      this.$router.push(
        `/member/temperature/${row.memberId}?name=${row.name}&age=${row.barthday}&gender=${row.sex}&school=${row.enterpriseName}`
      );
    },
    // 计算周同比 同比增长率=（本期数－同期数）÷同期数×100%。
    // 计算日环比 环比增长速度=（本期数－上期数）/上期数×100%
    weekly1: function () {
      return (
        ((this.firmTotalBrowse - this.firmTotal777Browse) /
          this.firmTotal777Browse) *
        100
      ).toFixed(2);
    },

    weekly2: function () {
      return (
        ((this.firmTotalShare - this.firmTotal777Share) /
          this.firmTotal777Share) *
        100
      ).toFixed(2);
    },

    weekly3: function () {
      return (
        ((this.firmTotalCollection - this.firmTotal777Collection) /
          this.firmTotal777Collection) *
        100
      ).toFixed(2);
    },

    weekly4: function () {
      return (
        ((this.firmUserNumber - this.firmUser777Number) /
          this.firmUser777Number) *
        100
      ).toFixed(2);
    },

    dayly1: function () {
      return (
        ((this.firmTodayBrowse - this.firmToday777Browse) /
          this.firmToday777Browse) *
        100
      ).toFixed(2);
    },

    dayly2: function () {
      return (
        ((this.firmTodayShare - this.firmToday777Share) /
          this.firmToday777Share) *
        100
      ).toFixed(2);
    },

    dayly3: function () {
      return (
        ((this.firmTodayCollection - this.firmToday777Collection) /
          this.firmToday777Collection) *
        100
      ).toFixed(2);
    },

    dayly4: function () {
      return (
        ((this.firmTodayUserNumber - this.firmTodayUser777Number) /
          this.firmTodayUser777Number) *
        100
      ).toFixed(2);
    },


    goArticleList() { // 进入文章列表
      this.$router.push(`/operation/article/list`)
    },
    goVideoList() { // 进入视频列表
      this.$router.push('/operation/video/list')
    },
    goAuditedArticleList() {//已审核列表
      this.$router.push('/operation/auditedArticle/list')
    },

    goPendingArticleList() {//待审核列表
      this.$router.push('/operation/pendingArticle/list')
    },
    goFailureArticleList() {//审p核失败列表
      this.$router.push('/operation/failureArticle/list')
    },
    goDisabledArticleList() {//系统禁用列表
      this.$router.push('/operation/disabledArticle/list')
    },

  },
  computed: {
    testFinalNum: function () {
      return parseInt((this.personNumber / this.testNumber) * 100);
    },
    heartFinalNum: function () {
      //计算心理测评的进度条
      // 心理测评人数/(心理测评人数+异常人数) * 100
      return Math.round(
        (this.abnormalNumber / (this.testNumber + this.abnormalNumber)) * 100
      );
    },
  },
  created() {
    // this.enterpriseId = sessionStorage.getItem("enterpriseId");
    this.enterpriseId = this.$route.params.id;
    this.enterpriseName = this.$route.params.name;
    this.type = this.$route.params.type;
    this.fetchMemberList(1);
    this.fetchTemperaturePeople(this.enterpriseName);
    this.testNumberPeople(this.enterpriseName);
    this.fetchFirmInfor(this.enterpriseId);
    this.fetchFirmInforNum(this.enterpriseId);
    this.fetchFatPeople(this.enterpriseName);
    this.fetchLikeTop10();
    this.fetchShareTop10();
    this.fetchBrowserTop10();
  },
  mounted() {
    getSchoolFatPeople(this.enterpriseId).then(() => {
      var chartDom = document.getElementById("pic1_img");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        color: ["#4AC493", "#F0AEA9", "#89878C", "#FA904B", "#F23E3E"],
        legend: {
          orient: "horizontal",
          bottom: 0,
          data: ["正常", "偏瘦", "生长迟缓", "肥胖", "超重"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "15",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {value: this.normalkg, name: "正常"},
              {value: this.litteThin, name: "偏瘦"},
              {value: this.litteThin, name: "生长迟缓"},
              {value: this.moreFat, name: "肥胖"},
              {value: this.fatter, name: "超重"},
              // {value: 1548, name: '搜索引擎'}
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    });
  },
};
</script>


<style lang="scss">
.school_pic {
  text-align: center;
  display: flex;
  justify-content: space-between;
  // box-shadow: black;
  margin-bottom: 30px;
  // padding: 20px;
  // border: 1px solid #000;
  border-radius: 10px;
  box-shadow: 0 0 15px rgb(207, 207, 207);

  .head {
    margin-top: 10px;
    display: block;
  }

  .pic1 {
    flex: 1;
    text-align: center;
    // 健康测评
    width: 379px;
    //margin: 0 auto;
    height: 337px;
    //display: inline-block;
    //margin-right: 20px;
    padding: 10px;

    #pic1_img {
      //text-align: center;
      width: 360px;
      margin: 0 auto;
      height: 220px;
    }
  }

  .pic2 {
    flex: 1;
    // 体温打卡
    width: 553px;
    height: 337px;
    //display: inline-block;
    margin-right: 20px;
    margin-left: 20px;
    padding: 10px
  }

  .pic2_text {
    text-align: left;

    .text1 {
      display: inline-block;
      text-align: center;
    }
  }

  .pic2_three {
    // 三个圈
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
  }

  .pic3 {
    // 心理测评
    width: 553px;
    height: 337px;
    //display: inline-block;
    text-align: left;
    flex: 1;
    padding: 10px;

    .pic3_text {
      margin-bottom: 73px;

      .text1 {
        text-align: center;
        display: inline-block;
      }
    }
  }
}

.pic_header {

  margin-bottom: 30px;

  P:nth-of-type(1) {
    font-weight: bold;
    font-size: 16px;
  }

  p:nth-of-type(2) {

    line-height: 17px;
    color: #C4C4C4;
    font-size: 12px;
  }

}

.men_List {
  padding: 20px;
  // border: 1px solid #000;
  border-radius: 10px;
  box-shadow: 0 0 15px rgb(211, 208, 208);
}

.person_search {
  background: #FBFBFB;
}

.firm_pic {
  .topFour {
    // 顶部四方块
    display: flex;
    padding-left: 28px;
    width: calc((100% - 2.5rem /* 40/16 */
    ));
    // display: -webkit-box;
    .color1 {
      display: inline-block;
      display: flex;
      width: 356px;
      height: 139px;
      background: linear-gradient(
          to right,
          rgb(80, 151, 214),
          rgb(114, 177, 233)
      );
      margin-right: 20px;
    }

    .color2 {
      display: inline-block;
      display: flex;
      width: 356px;
      height: 139px;
      background: linear-gradient(
          to right,
          rgb(80, 185, 141),
          rgb(116, 217, 175)
      );
      margin-right: 20px;
    }

    .color3 {
      display: inline-block;
      display: flex;
      width: 356px;
      height: 139px;
      background: linear-gradient(
          to right,
          rgb(242, 125, 88),
          rgb(248, 158, 130)
      );
      margin-right: 20px;
    }

    .color4 {
      display: inline-block;
      display: flex;
      width: 356px;
      height: 139px;
      background: linear-gradient(
          to right,
          rgb(232, 111, 115),
          rgb(238, 131, 135)
      );
    }
  }

  .cor_left {
    display: inline-block;
    width: 116px;
    height: 100%;
    color: whitesmoke;
    margin-left: 22px;
  }

  .cor_right {
    display: inline-block;
    width: 116px;
    height: 100%;
    color: whitesmoke;
    margin-left: 26px;
  }

  .cor_p1 {
    margin-top: 19px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    opacity: 1;
  }

  .cor_p2 {
    margin-top: 6px;
    font-size: 27px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 38px;
    opacity: 1;
    margin-bottom: 24px;
  }

  .cor_p3 {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 22px;
    display: flex;
  }

  .heart_twitter {
    // 心理测评和推文统计
    display: flex;
    padding-left: 28px;
    width: calc((100% - 2.5rem /* 40/16 */
    ));

    .color_text {
      // 心理测评
      width: 620px;
      height: 337px;
      display: inline-block;
      margin-top: 20px;
      padding: 20px;

      .color_text1 {
        text-align: left;
        margin-bottom: 53px;

        .text1 {
          display: inline-block;
          text-align: center;
        }
      }
    }

    .twitter {
      padding: 20px;
      width: 844px;
      height: 337px;
      background: #ffffff;
      opacity: 1;
      display: inline-block;
      margin-left: 20px;
      margin-top: 20px;
      // display: flex;

      .tw_content {
        cursor: pointer;
        width: 260px;
        height: 70px;
        float: left;
        display: flex;
        margin-bottom: 40px;
        margin-top: 10px;

        div {
          // display: inline-block;
          float: left;

          p {
            width: 74px;
            height: 25px;
            font-size: 33px;
            font-family: Bahnschrift;
            font-weight: 400;
            line-height: 70px;
            color: #333333;
            opacity: 1;
            // float: left;
          }

          span {
            width: 42px;
            height: 20px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 70px;
            color: #909399;
            opacity: 1;
          }
        }

        img {
          width: 70px;
          height: 70px;
          float: left;
        }
      }

      .tw_content:hover {
        background: #cac9c9;
        border-radius: 10px;
      }
    }
  }

  .analysis-body {
    display: flex;
    justify-content: space-between;
    margin: 3.25rem /* 52/16 */
    3.125rem /* 50/16 */
    0 3.125rem /* 50/16 */
  ;
    padding-bottom: 3.75rem /* 60/16 */
  ;

    .body-item {
      padding: 1.4375rem /* 23/16 */
      0 0 0;
      width: calc((100% - 2.5rem/* 40/16 */) / 3);
      background-color: #fff;
      border-radius: 0.9375rem /* 15/16 */
    ;
      box-sizing: border-box;

      .item-title {
        padding-bottom: 1.25rem /* 20/16 */
      ;
        font-size: 1.1875rem /* 19/16 */
      ;
        color: #333;
        text-align: center;
        border-bottom: 1px solid #f4f4f4;
      }
    }
  }

  .top-box {
    padding: 1.875rem /* 30/16 */
    2.5rem /* 40/16 */
  ;

    .top-item {
      display: flex;
      margin-bottom: 1rem /* 16/16 */
    ;
      justify-content: space-between;
      cursor: pointer;
      transition: 0.4s;

      // width: 300px;
      // white-space: nowrap;
      // text-overflow:ellipsis;

      &:hover {
        background-color: #f8f8f8;
      }

      &:last-child {
        margin-bottom: 0;
      }

      & > div:nth-of-type(1) {
        margin-right: 1.25rem /* 20/16 */
      ;

        span:nth-of-type(1) {
          display: inline-block;
          margin-right: 0.9375rem /* 15/16 */
        ;
          width: 1.5rem /* 24/16 */
        ;
          height: 1.5rem /* 24/16 */
        ;
          text-align: center;
          line-height: 1.5rem /* 24/16 */
        ;
          border-radius: 0.375rem /* 6/16 */
        ;
          background-color: #ededed;
          font-size: 0.75rem /* 12/16 */
        ;
          color: #fff;

          &.active {
            background-color: #ff6f6f;
          }
        }

        span:nth-of-type(2) {
          font-size: 0.875rem /* 14/16 */
        ;
          color: #919191;
          // display: -webkit-box;
          // -webkit-box-orient: vertical;
          // -webkit-line-clamp: 1;
          overflow: hidden;
          // text-overflow: ellipsis;
          // white-space: nowrap;
          width: 14vw;
        }
      }

      & > div:nth-of-type(2) {
        // width: 9.0625rem /* 145/16 */;
        flex-shrink: 0;

        span:nth-of-type(1) {
          padding-right: 1.25rem /* 20/16 */
        ;
          font-size: 0.75rem /* 12/16 */
        ;
          color: #cccccc;
        }

        span:nth-of-type(2) {
          font-size: 0.75rem /* 12/16 */
        ;
          color: #ff6f6f;
        }
      }
    }
  }
}
</style>
